<template>
  <view>
    <view class="wrap major-wrapper">
      <scroll-view class="sv-main"
                   scroll-y
                   style="width: 100%;">
        <view class="page-box">
          <view class="major-item-wrapper">
            <view class="major-item" :class="item.selected? 'grid_item-selected': 'grid_item'"
                    @click="selDictItem(item)" v-for="(item, index) in dictList"
                         :key="index">
              <view class="major-item-inner">
										<img v-if="!item.selected" class="item-image" :src="item.src" alt="" srcset="">
										<img v-if="item.selected" class="item-image" :src="item.activeSrc" alt="" srcset="">
                <view class="text-major-name">{{item.title}}</view>
              </view>
            </view>
					</view>

        </view>

      </scroll-view>
      <u-button class='btn-submit'
                @click="clkSubmit()"
                :ripple="true"
                hair-line=false>确认</u-button>
								
      <text class="text-pass"
            @click="clkSubmit">跳过</text>

    </view>
  </view>
</template>

<script>
import apis from "@/apis.js";
export default {
  data() {
    return {
      gridItemStyle: {
        padding: "1rpx",
      },
      dx: 0,
      loadStatus: ["loadmore"],
      subjectType: [],
      dictList: [
        {
          text: "放射治疗",
          title: "放射治疗",
          value: "1",
          selected: false,
          activeSrc: "/static/img/community/p_1_s.png",
          src: "/static/img/community/p_1.png",
        },
        {
          text: "化学治疗",
          title: "化学治疗",
          value: "2",
          selected: false,
					
          activeSrc: "/static/img/community/p_2_s.png",
          src: "/static/img/community/p_2.png",
        },
        {
          text: "靶向治疗",
          title: "靶向治疗",
          value: "3",
          selected: false,
					
          activeSrc: "/static/img/community/p_3_s.png",
          src: "/static/img/community/p_3.png",
        },
        {
          text: "免疫治疗",
          title: "免疫治疗",
          value: "4",
          selected: false,
					
          activeSrc: "/static/img/community/p_4_s.png",
          src: "/static/img/community/p_4.png",
        },
        {
          text: "外科治疗",
          title: "外科治疗",
          value: "5",
          selected: false,
					
          activeSrc: "/static/img/community/p_5_s.png",
          src: "/static/img/community/p_5.png",
        },
        {
          text: "介入治疗",
          title: "介入治疗",
          value: "6",
          selected: false,
					
          activeSrc: "/static/img/community/p_6_s.png",
          src: "/static/img/community/p_6.png",
        },
        {
          text: "中医中药",
          title: "中医中药",
          value: "7",
          selected: false,
					
          activeSrc: "/static/img/community/p_7_s.png",
          src: "/static/img/community/p_7.png",
        },
        {
          text: "内分泌治疗",
          title: "内分泌治疗",
          value: "8",
          selected: false,
					
          activeSrc: "/static/img/community/p_8_s.png",
          src: "/static/img/community/p_8.png",
        },
        {
          text: "影像",
          title: "影像",
          value: "9",
          selected: false,
					
          activeSrc: "/static/img/community/p_9_s.png",
          src: "/static/img/community/p_9.png",
        },
        {
          text: "检验",
          title: "检验",
          value: "10",
          selected: false,
					
          activeSrc: "/static/img/community/p_10_s.png",
          src: "/static/img/community/p_10.png",
        },
        {
          text: "病理",
          title: "病理",
          value: "11",
          selected: false,
					
          activeSrc: "/static/img/community/p_11_s.png",
          src: "/static/img/community/p_11.png",
        },
        {
          text: "康复",
          title: "康复",
          value: "12",
          selected: false,
					
          activeSrc: "/static/img/community/p_12_s.png",
          src: "/static/img/community/p_12.png",
        },
        {
          text: "随访",
          title: "随访",
          value: "13",
          selected: false,
					
          activeSrc: "/static/img/community/p_13_s.png",
          src: "/static/img/community/p_13.png",
        },
        {
          text: "其他",
          title: "其他",
          value: "14",
          selected: false,
					
          activeSrc: "/static/img/community/p_14_s.png",
          src: "/static/img/community/p_14.png",
        },
      ],
    };
  },
  onLoad() {
    // this.getDiceData()
  },
  computed: {},
  methods: {
    /**
     *  @function 获取专业
     */
    getDiceData() {
      this.$http.get(`${apis.getDictItems}/subject_type`).then((res) => {
        if (res.data.code === 0) {
          this.dictList = res.data.result;
          this.dictList.forEach((item) => {
            item.selected = false;
          });
        }
      });
    },
    selDictItem(item) {
      item.selected = !item.selected;
      this.$forceUpdate();
    },
    goTo() {
      uni.switchTab({
        url: "/pages/tabbar/tabbar-1/tabbar-1",
      });
    },

    clkSubmit() {
      this.subjectType = this.dictList.filter((item) => {
        if (item.selected) {
          return item;
        }
      });
      this.$http
        .post(apis.selectSubjectType, {
          subjectType: this.subjectType.map((item) => item.value).join(","),
        })
        .then((res) => {
          if (res.data.code === 200) {
            uni.switchTab({
              url: "/pages/tabbar/tabbar-1/tabbar-1",
            });
          }
        });
    },
  },
};
</script>
<style lang="scss" scoped>
page {
	background: #E9EBF4;
}
.page-box {
  // padding: 32rpx;
	background: #E9EBF4;
	display: flex;
	justify-content: center;
}

.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
	background: #E9EBF4;
	justify-content: center;

  .sv-main {
    height: 50%;
    flex-grow: 2;
  }

  .text-pass {
    font-size: 38rpx;
    font-family: SimHei;
    font-weight: 400;
    line-height: 52rpx;
    color: #21d2ff;
    opacity: 1;

    align-self: flex-end;
    margin-right: 35rpx;

    border-bottom: 2rpx solid #21d2ff;
    opacity: 1;
  	margin-bottom: 70rpx;
  }
	.u-grid-item {
	background: #E9EBF4 !important;

	}
	.major-item-wrapper {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		margin-top: 32rpx;
		margin-left: 32rpx;
	}

	.major-item-inner {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

  .major-item {
    display: flex;
    flex-direction: column;
    width: 215rpx;
    height: 178rpx;
    background-size: 100%;
    background-repeat: no-repeat;
		background: #fff;

		border: 1px solid #FFFFFF;
		box-shadow: 0px 4rpx 10rpx 0px rgba(52, 60, 95, 0.24);
		border-radius: 6rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 21rpx;
		margin-bottom: 21rpx;

    &:nth-child(3n+3) {
			margin-right: 0;
		}

    .text-major-name {
      text-align: center;
      font-family: SimHei;

      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #3FA7FF;
			margin-top: 15rpx;
    }
  }

  .grid_item-selected {
    background: #137ED9;

		
    // background-image: url("./static/img/community/bg_major_s.png");

    .text-major-name {
      color: #fff;
  }
	}
}

.swiper-box {
  flex: 1;
}

.swiper-item {
  height: 100%;
}

.btn-submit {
  width: 686rpx;
	height: 88rpx;
	background: #3CA0FE;
	border-radius: 44rpx;
  margin-top: 40rpx;
  margin-bottom: 70rpx;
  background: #3fa7ff;
  box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
  opacity: 1;

  font-size: 31rpx;
  font-family: SimHei;
  font-weight: 400;
  line-height: 40rpx;
  color: #ffffff;
  opacity: 1;
}
.item-image {
	width: 74rpx;
	height: 74rpx;
}

</style>
<style lang="scss">
	.major-wrapper {
		.u-grid-item-box {
			padding: 0 !important;
		}
	}
</style>
